<template>
  <div class="detail">
    <div class="header">
      <van-nav-bar title="详情页">
        <template #left>
          <van-icon
            name="arrow-left"
            size="26"
            color="black"
            @click="onClickLeft"
          />
        </template>
        <template #right>
          <van-popover
            v-model="showPopover"
            trigger="click"
            :actions="actions"
            @select="onSelect"
            placement="bottom-end"
            theme="dark"
          >
            <template #reference>
              <van-icon name="ellipsis" size="26" color="black" />
            </template>
          </van-popover>
        </template>
      </van-nav-bar>
    </div>

    <div class="container">
      <div class="banner_box">
        <van-swipe class="my-swipe" :autoplay="3000" @change="onChange">
          <van-swipe-item v-for="(item, index) in bannerList" :key="index">
            <img :src="item" @click="imgPreview(bannerList)" />
          </van-swipe-item>
        </van-swipe>
        <span class="current">{{ index + 1 }} / {{ bannerList.length }}</span>
      </div>

      <div class="price">
        <div>
          <i>嗨购秒杀</i>
          <p>￥{{ price }}</p>
        </div>

        <div>
          <span>距离结束还剩</span>
          <van-count-down :time="time">
            <template #default="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
        </div>
      </div>
      <div class="title">
        <h4>{{ title }}</h4>
        <p></p>
      </div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCart"
      />
      <van-goods-action-button type="danger" text="立即购买" @click="pay"/>
    </van-goods-action>

    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
  </div>
</template>

<script>
import Vue from "vue";
import {
  Swipe,
  SwipeItem,
  NavBar,
  Popover,
  ShareSheet,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
  CountDown,
  ImagePreview,
  Toast,
} from "vant";

Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(NavBar);
Vue.use(Popover);
Vue.use(ShareSheet);
Vue.use(GoodsAction);
Vue.use(GoodsActionIcon);
Vue.use(GoodsActionButton);
Vue.use(CountDown);
Vue.use(ImagePreview);
Vue.use(Toast);

import { getBannerlList, addcart ,} from "../api/detail";
import { addOrder} from "../api/cart";
export default {
  data() {
    return {
      bannerList: [],
      showPopover: false,
      actions: [
        { text: "返回首页", icon: "wap-home-o" },
        { text: "分享", icon: "share-o" },
      ],
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      price: 0,
      title: "",
      time: 60 * 60 * 1000,
      current: 1,
      total: 1,
      index:0,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onSelect(action, index) {
      switch (index) {
        case 0:
          this.$router.push("/home");
          break;
        case 1:
          this.showShare = true;
          break;
        default:
          break;
      }
    },
    onSelect1(option) {
      console.log(option.name);
      this.showShare = false;
    },
    imgPreview(list) {
      ImagePreview({
        images: list,
        closeable: true,
      });
    },
    addCart() {
      //判断是否登录
      if (!localStorage.getItem("token")) {
        this.$router.push("/login");
      } else {
        //有token，调用接口加入购物车
        addcart({
          token: localStorage.getItem("token"),
          userid: localStorage.getItem("userid"),
          proid: this.$route.params.proid,
          num: 1,
        }).then((res) => {
          console.log(res);
          Toast("加入购物车成功");
        });
      }
    },
    onChange(index){
      this.index = index
    },
    pay(){
      addOrder({userid:localStorage.getItem("userid")}).then(res=>{
        console.log(res);
        if (res.data.code==200) {
          this.$router.push("/order/"+res.data.time)
        }
      })
    }
  },
  created() {
    getBannerlList(this.$route.params.proid).then((data) => {
      console.log(data.data.data);
      this.bannerList = data.data.data.banners[0].split(",");
      this.price = data.data.data.originprice;
      this.title = data.data.data.proname;
    });
  },
};
</script>

<style scoped>
.my-swipe {
  height: 4rem;
  position: relative;
}
.banner_box {
  position: relative;
}
.my-swipe img {
  height: 100%;
  width: 100%;
}
.detail .container .price {
  height: 0.5rem;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  padding: 0 0.1rem;
}
.detail .container .price div:nth-of-type(1) {
  display: flex;
  align-items: center;
}
.detail .container .price div i {
  display: inline-block;
  font-size: 0.1rem;
  height: 0.24rem;
  background: orangered;
  color: rgba(255, 255, 255, 0.8);
  width: 0.68rem;
  text-align: center;
  line-height: 0.24rem;
  border-radius: 0.1rem;
  margin-right: 0.1rem;
}
.detail .container .price div:nth-of-type(2) span {
  font-size: 0.1rem;
}
.detail .container .price div p {
  color: #ee0a24;
  font-size: 0.26rem;
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 0.04rem;
}
.current {
  display: inline-block;
  width: 0.46rem;
  font-size: 0.14rem;
  height: 0.26rem;
  background: rgba(0, 0, 0, 0.1);
  color: #fff;
  text-align: center;
  line-height: 0.26rem;
  border-radius: 0.1rem 0 0 0.1rem;
  position: absolute;
  right: 0;
  bottom: 0.4rem;
  z-index: 9;
}
.title {
  margin: 0.05rem 0.1rem;
}
.title h4 {
  font-size: 0.2rem;
  line-height: 0.22rem;
}
</style>